<template>
  <div class="analysis-header">
    <div class="analysis1-top">
      <div class="analysis1-top-content">
        <div class="analysis1-top-left">
          <ul>
            <li class="time">{{time}}</li>
            <li>{{today}}</li>
            <li>{{week|getweek}}</li>
            <li>{{minute}}</li>
            <li>更新</li>
          </ul>
        </div>
        <div class="analysis1-top-right">
          <ul>
            <li @click="backHome()">
              <i class="iconfont icon-fanhui"></i>返回首页<span>|</span>
            </li>
            <li>
              欢迎您，管理员<span>|</span>
            </li>
            <li>
              <i class="iconfont icon-switchuser"></i>管理员<span>|</span>
            </li>
            <li>
              <i class="iconfont icon-guanji"></i>退出
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="menu">
      <div class="menu-content">
        <div class="menu-left">
          <ul>
            <li :class="active ===1 ? 'active' : ''" v-hasPermi="['analysis1']">
              <router-link :to="{ path: '/analysisHome/analysis1'}" tag="span">综合统计分析</router-link>
            </li>

            <li :class="active ===2 ? 'active' : ''" v-hasPermi="['analysis2']">
              <router-link :to="{ path: '/analysisHome/analysis2'}" tag="span">医院运营状态分析</router-link>
            </li>
            <li :class="active ===3 ? 'active' : ''" v-hasPermi="['analysis3']">
              <router-link :to="{ path: '/analysisHome/analysis3'}" tag="span">医疗质量分析</router-link>
            </li>
          </ul>
        </div>
        <div class="menu-right">
          <ul>
            <li :class="active ===4 ? 'active' : ''" v-hasPermi="['analysis4']">
              <router-link :to="{ path: '/analysisHome/analysis4'}" tag="span">医疗收入分析</router-link>
            </li>
            <li :class="active ===5 ? 'active' : ''" v-hasPermi="['analysis5']">
              <router-link :to="{ path: '/analysisHome/analysis5'}" tag="span">疾病谱分析</router-link>
            </li>
            <li :class="active ===6 ? 'active' : ''" v-hasPermi="['analysis6']">
              <router-link :to="{ path: '/analysisHome/analysis6'}" tag="span">医疗资源分析</router-link>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="project-name">
      <div class="project-name-content">
        陇西区域卫生信息平台
      </div>
    </div>
  </div>
</template>

<script>
import 'echarts-liquidfill'
import moment from "moment";
export default {
  props: {
    active: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      time: null,
      myChart: null
    };
  },
  created() {
    this.timer()
  },
  computed: {
    today() {
      return moment().format('YYYY-MM-DD')
    },
    week() {
      return moment().format('E')
    },
    minute() {
      return moment().format('HH:mm')
    }
  },
  filters: {
    getweek(e) {
      var week = ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日']
      return week[e - 1]
    },
  },
  methods: {
    /* 回到首页 */
    backHome() {
      this.$router.push('/')
    },
    // 饼图
    // https://www.makeapie.com/editor.html?c=xG3GJsBZ0K
    // 水球图
    // https://www.makeapie.com/editor.html?c=xEo14eUPct
    // 柱状图
    // https://www.makeapie.com/editor.html?c=xXSAXgHtnG
    // 折线图
    // https://www.makeapie.com/editor.html?c=x7OfrOzSlj
    // https://www.makeapie.com/editor.html?c=xklYtZRN3Y
    // 幸福指数饼图
    // https://www.makeapie.com/editor.html?c=xr1cX-zkWl&v=5
    timer() {
      return setInterval(() => {
        this.getTime()
      }, 1000)
    },
    getTime() {
      this.time = moment().format('HH:mm:ss')
    },
    setHtml() {
      switch (window.screen.width) {
        case 1920:
          var docEl = document.documentElement
          docEl.style.fontSize = '100px'
          break;
        case 1680:
          var docEl = document.documentElement
          docEl.style.fontSize = '87.5px'
          break;
        case 1600:
          var docEl = document.documentElement
          docEl.style.fontSize = 160000 / 1920 + 'px'
          break;
        case 1440:
          var docEl = document.documentElement
          docEl.style.fontSize = 144000 / 1920 + 'px'
          break;
        case 1400:
          var docEl = document.documentElement
          docEl.style.fontSize = 140000 / 1920 + 'px'
          break;
        case 1360:
          var docEl = document.documentElement
          docEl.style.fontSize = 136000 / 1920 + 'px'
          break;
        case 1366:
          var docEl = document.documentElement
          docEl.style.fontSize = 136600 / 1920 + 'px'
          break;
        case 1280:
          var docEl = document.documentElement
          docEl.style.fontSize = 128000 / 1920 + 'px'
          break;
        case 1152:
          var docEl = document.documentElement
          docEl.style.fontSize = 115200 / 1920 + 'px'
          break;
        case 1024:
          var docEl = document.documentElement
          docEl.style.fontSize = 102400 / 1920 + 'px'
          break;
        case 800:
          var docEl = document.documentElement
          docEl.style.fontSize = 80000 / 1920 + 'px'
          break;
        default:
          var docEl = document.documentElement
          docEl.style.fontSize = '100px'
      }
    },
    resetFont() {
      var docEl = document.documentElement
      docEl.style.fontSize = 'inherit'
    }
  },
  mounted() {
    this.setHtml()
  },
  destroyed() {
    this.resetFont()
  }
};
</script>
<style scoped lang="less">
.left {
  float: left;
}
.right {
  float: right;
}
.data-container {
  background: url("~@/assets/images/large-bg.png") no-repeat;
  height: 100vh;
  background-size: cover;
  background-position: center center;
  .analysis-header {
    overflow: hidden;
    .analysis1-top {
      overflow: hidden;
      ul {
        margin: 0;
        padding: 0;
        li {
          margin: 0;
          padding: 0;
          list-style-type: none;
          float: left;
          font-size: 0.14rem;
          line-height: 0.14rem;
          color: #b0bad6;
        }
      }
      .analysis1-top-content {
        padding: 0.15rem 0.2rem;
        .analysis1-top-left {
          float: left;
          li {
            line-height: 0.36rem;
            margin-right: 0.07rem;
          }
          li.time {
            color: #ffffff;
            font-size: 0.36rem;
          }
        }
        .analysis1-top-right {
          float: right;
          li {
            font-size: 0.2rem;
            line-height: 0.2rem;
            i {
              margin-right: 0.06rem;
            }
            font-family: "Microsoft YaHei";
            color: #b0bad6;
          }
          span {
            margin: 0 0.3rem;
          }
        }
      }
    }
    .menu {
      background-image: url("~@/assets/images/zhuangshi.png");
      background-repeat: no-repeat;
      background-size: 100%;
      background-position: center center;
      height: 0.44rem;
      ul {
        margin: 0;
        padding: 0;
        li {
          margin: 0;
          padding: 0;
          list-style-type: none;
          float: left;
          font-size: 0.14rem;
          line-height: 0.14rem;
          color: #ffffff;
          background: url("~@/assets/images/557.png") no-repeat center center;
          background-size: 100%;
          width: 1.5rem;
          height: 0.32rem;
          text-align: center;
          line-height: 0.32rem;
          margin: 0 0.05rem;
          cursor: pointer;
        }
        li.active {
          background-image: url("~@/assets/images/1017.png");
          color: #00ffee;
        }
      }
      .menu-content {
        padding: 0.2rem 0.82rem;
        .menu-left {
          float: left;
        }
        .menu-right {
          float: right;
        }
      }
    }
    .project-name {
      position: relative;
      .project-name-content {
        position: absolute;
        color: #00f8ff;
        font-size: 0.44rem;
        top: 0%;
        left: 50%;
        transform: translate(-50%, -130%);
      }
    }
  }
}
</style>

